<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">配置管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="参数名">
						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" 
							class="btn btn-default btn-delete">删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
				  <table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
							<th>参数名</th>
							<th>参数值</th>
							<th>创建日期</th>
							<th>修改日期</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					</tbody>
				  </table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix">
            </div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		/*下方load的等同于下面 
		$.ajax({
			url:"doPageUI.do",
			async:false,
			success:function(result){
				$("#pageId").html(result);
			}
		}) */
		//load(url,[data],[callback])
		$("#pageId").load("doPageUI.do",
			function(){//callback回调函数
				doGetObjects();
		});
		$(".input-group-btn")
		.on("click",".btn-search",doQueryObjects)
		.on("click",".btn-delete",doDeleteObjects)
		.on("click",".btn-add",doLoadEditUI);
		//当点击table中thead内部的checkbox时,修改每条记录的checkbox状态
		//$("#checkAll").change(doChangeCheckAllState);
		$("thead").on("change","#checkAll",doChangeTBodyCheckBoxState);
		$("tbody").on("change","input[name='cItem']",doChangeTHeadCheckBoxState);
		$("tbody").on("click",".btn-update",doLoadEditUI);
	})
	function doLoadEditUI(){
		var title;
		if($(this).hasClass("btn-add")){
			title="添加参数呦亲";
			$("#myModal").removeData();
			var url="config/doConfigSaveEditUI.do"
				$.ajax({url:url,success:function(result){
					console.log(result);
						if(result.state==0){
							alert(result.message);
						}else{
							doLoadtitle(title,url);
						}
					}
				})
		}else{
			title="修改参数呦亲";
			var rowData = $(this).parents("tr").data("rowData");
			console.log(rowData);
			$("#myModal").data("rowData",rowData);
			var url="config/doConfigUpdateEditUI.do"
				$.ajax({
					url:url,
					success:function(result){
					console.log(result);
						if(result.state==0){
							alert(result.message);
						}else{
							doLoadtitle(title,url);
						}
					}
				})
		}
	}
	
	function doLoadtitle(title,url){
		$("#myModal .modal-body").load(url,function(){
			$("#myModal #myModalLabel").html(title);
			$("#myModal").modal("show");
		});
	}
	function doQueryObjects(){
		//初始化也面值为1
		$("#pageId").data("pageCurrent",1);
		//执行查询操作
		doGetObjects();
	}
	function doDeleteObjects(){
		//1.获取选中的id
		var ids=doGetCheckedIds();
		//2.发送异步请求,执行删除操作
		if(ids==null||ids.length==0){
			alert("请先选中");
			return;
		}
		var url="config/doDeleteObjects.do";
		var params={"ids":ids.toString()};
		$.post(url,params,function(result){
			if(result.state==1){
				alert(result.message);
				//重新查询,刷新页面
				doGetObjects();
			}else{
				alert(result.message);
			}
		})
	}
	function doGetCheckedIds(){
		var array=[];
		$("#tbodyId input[type='checkbox']").each(
			function(){
				if($(this).prop("checked")){
					array.push($(this).val());
				}
			}
		)
		return array;
	}
	
	
	function doGetObjects(){
		var pageCurrent=
			$("#pageId").data("pageCurrent");
		if(!pageCurrent)
			pageCurrent=1;
		var name=$("#searchNameId").val().trim();
		/* var params="pageCurrent="+pageCurrent+"&name="+name; */
		var params={"pageCurrent":pageCurrent};
		if(name)
			params.name=name;
		var url="config/doFindPageObjects.do";
		$.ajax({
			data:params,
			url:url,
			async:true,
			type:"GET",
			dataType:"json",
			success:function(result){
				doHandleResponse(result);
			}
		})
	}
	function doHandleResponse(result){
		if(result.state==1){
			console.log(result);
			console.log(result.data.records[0]);
			console.log(result.data.records[0].name);
			setTable(result.data.records);
			doSetPagination(result.data);
		}else{
			alert(result.message);
		}
	}
	function setTable(records){
		var tBody=$("#tbodyId");
		tBody.empty();
		for(var i in records){
			var tr=$("<tr></tr>");
			//修改时可以直接获取tr对象上绑定的数据,然后通过此数据初始化页面
			tr.data("rowData",records[i]);
			var td=creatTd(records[i]);
			tr.append(td);
			tBody.append(tr);
		}
	}
	function creatTd(row){
		var td=
			"<td>"+"<input type='checkbox' name='cItem' value='"+row.id+"'>"+row.id+"</td>"
			+"<td>"+row.name+"</td>"
			+"<td>"+row.value+"</td>"
			+"<td>"+new Date(row.createdTime).toLocaleDateString()+"</td>"
			+"<td>"+new Date(row.modifiedTime).toLocaleDateString()+"</td>"
			+"<td><a class='btn-update'>修改</a></td>";
		return td;
	}
	function doChangeTBodyCheckBoxState(){
		var state = $(this).prop("checked");
		//console.log(state);
		/* $("#tbodyId input[type='checkbox']").each(function(){
			$(this).prop("checked",state);
			console.log($(this).prop("checked"));
		}) */
		$("#tbodyId input[type='checkbox']").prop("checked",state);
	}
	function doChangeTHeadCheckBoxState(){
		console.log("ddd")
		var flag=true;
		$("#tbodyId input[type='checkbox']").each(function(){
			flag = flag&$(this).prop("checked")//&&也可以 
		});
		$("#checkAll").prop("checked",flag);
	}
	
</script>











